<template>
  <transition name="msgbox-fade">
    <div class="el-message-box__wrapper" tabindex="-1" v-show="visible" @click.self="handleWrapperClick">
      <div class="el-message-box" :style="{width: isSingle ? '500px' : '900px'}">
        <template v-if="!isSingle">
          <el-carousel :interval="4000" type="card" :initial-index="index" :autoplay="false" ref="carousel" height="180">
            <el-carousel-item v-for="item in imgs" :key="item">
              <img :src="item"/>
            </el-carousel-item>
          </el-carousel>
        </template>
        <template v-if="isSingle">
          <img :src="imgs"/>
        </template>
      </div>
    </div>
  </transition>
</template>

<script type="text/babel">

export default {
  props: {
    modal: {
      default: true
    },
    visible: {
      type: Boolean,
      default: false
    }
  },

  methods: {
    doClose() {
      if (!this.visible) return;
      this.visible = false;
      this._closing = true;

      this.onClose && this.onClose();
      this.opened = false;
    },
    handleWrapperClick() {
      this.doClose();
    }
  },

  watch: {
    visible(val) {
      if (val) {
        this.uid++;
      } else {
        
      }
    }
  },

  data() {
    return {
      uid: 1,
      imgs: undefined,
      index: 0,
      isSingle: true
    };
  }
};
</script>

<style scoped lang='less'>
img {
  max-height: 100%;
}
.el-message-box {
  background: transparent;
  text-align: center;
}
.el-carousel__mask {
  background: transparent !important;
}
</style>
